<template>
    <div class="count">
        <!-- 
            运用计算属性........重新复习,
            计算属性,一般涉及比较复杂的运算后的数据都要用到我们的计算属性computer
            否则我们直接在项目中的html写的话,会使得我们的项目很臃肿
            我们可以在我们的声明中直接把数值计算好,返回.再拿来用
            computer属性返回的直接就是一个ref()响应式
         -->
        <h2>当前求和为:{{ sum }} 10倍后{{ bigSum }}</h2>
        <select v-model.number="Num">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increase">加</button>
        <button @click="decrease">减</button>
        
    </div>
</template>

<script lang='ts' setup name='count'>
import { ref } from 'vue';
import { useCountStore } from '@/store/useCount';
import { storeToRefs } from 'pinia';
/* 
    添加我们的求和数和我们加的数字
*/
const sumStore = useCountStore()
/* 
    让其不需要+一个sumStore 我们可以进行解构
    但是用toRefs方法的会,会把我们sumStore的所有数据都变成响应式,会损耗性能
    我们在pinia中有方法
    对我们需要的数据进行解构赋值
    而方法不需要进行重新变成响应式,因为他是一个函数.

/* 
    在我们的子组件页面中修改
    第一种方法是,直接修改
    所见即所得..在我们的页面内操作,是能影响到pinia中的数据的....
    countStore.sum = xxx
    当我们修改一次就会有一次修改记录
    
    第二种修改方式：批量修改
    countStore.$patch({
    sum:999,
    school:'atguigu'


    在pinia中修改
    第三种修改方式：借助`action`(选项式组件的叫法)(意思就是方法)修改（`action`中可以编写一些业务逻辑）
    在pinia中修改,可以写一些逻辑,
    比如
    if for white循环
    例子:if判断我们的数字小于多少才可以进行修改...

})
*/


let { sum, Num, bigSum } = storeToRefs(sumStore)
let { increase, decrease } = sumStore


</script>

<style scoped>
div.count {
    height: 100px;
    background-color: aquamarine;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}

select,
button {
    margin: 0 5px;
    height: 30px;
}
</style>